<form>
    <div class="form-group">
        <label for="id">产品代码</label>
        <input type="text " class="form-control" id="id" name="id" [formControl]='id'>
    </div>
    <div class="form-group">
        <label for="productName">产品名称</label>
        <input type="productName" class="form-control" id="productName" name="productName" [formControl]='productName'>
    </div>
    <div class="form-group">
        <label for="price">价格</label>
        <input type="price" class="form-control" id="price" name="price" [formControl]='price'>
    </div>
</form>
<div>
    <button type="button" class="btn btn-outline-primary" (click)="search()">查询</button>
    <button type="button" class="btn btn-outline-secondary" (click)="add()">添加</button>
    <button type="button" class="btn btn-outline-success" (click)="update()">修改</button>
    <button type="button" class="btn btn-outline-danger" (click)="delete()">删除</button>
</div>
<table class="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">产品代码</th>
            <th scope="col">姓名</th>
            <th scope="col">密码</th>
        </tr>
    </thead>
    <tbody class="tr-text">
        <tr *ngFor='let product of products$|async;let i=index' (click)="select(product)">
            <th scope="row">{{i}}</th>
            <td>{{product.id}}</td>
            <td>{{product.productName}}</td>
            <td>{{product.price}}</td>
        </tr>
    </tbody>
</table>